axios.defaults.baseURL = 'http://ajax-api.itheima.net'
const topPart = document.querySelector('.top')
axios({
  url: '/api/category/top',
  method: 'GET',
}).then(({ data: res }) => {
  console.log(res)
  const newArr = res.data.map((item) => {
    return axios({
      url: '/api/category/sub?id=' + item.id,
      method: 'GET',
    })
  })
  return Promise.all(newArr).then((res) => {
    // console.log(res)
    let html = res
      .map(({ data: item }) => {
        console.log(item)
        return ` <li>
      <a href="javascript:;">${item.data.name}</a>
      <img
        src="${item.data.picture}"
        alt=""
      />
      <ul class="sub">${item.data.children
        .map((item) => {
          return `<li>
        <a href="javascript:;">
          <span>${item.name}</span>
          <img
            src="${item.picture}"
            alt=""
          />
        </a>
      </li>`
        })
        .join('')}
      </ul>
    </li>`
      })
      .join('')
    topPart.innerHTML = html
  })
})
